<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,user-scalable=no"
    />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 257px;
        height: 160px;
        background: deeppink;
        margin-left: 10%;
      }
    </style>
    <!--
			ui: 320px
			
			320px --- 375px
			
			viewport适配：
				把整个设计图纸变成屏幕区域大小（屏幕真实css像素大小 = 320） == 布局视口变成320
				
				方案1： width=320 (安卓手机不支持)
				方案2：initial-scale = 375/320  --- 放大操作
			
		--></head>
  <body>
    <div id="box"></div>
  </body>
  <script type="text/javascript">
    //优化
    !(function () {
      //屏幕宽
      var width = document.documentElement.clientWidth //375
      console.log(width)
      //目标宽度
      var targetW = 320 //设计稿的图的 宽
      //比例
      console.log(414 / 750)
      var scale = width / targetW
      var metaNode = document.querySelector('meta[name="viewport"]')
      metaNode.setAttribute(
        'content',
        'initial-scale=' + scale + ',user-scalable=no'
      )
    })()
  </script>
</html>
